<template>
  <div id="username">
    <el-title :title="title"></el-title>
    <!-- 个人信息 -->
    <div class="infor">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="头像：" prop="name">
          <el-upload
            class="avatar-uploader"
            action="https://www.tcxtzl.gov.cn/api/project/upload"
            :show-file-list="false"
            :disabled="picDis"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <i class="el-icon-delete deteled" v-if="imageUrl" @click="deteled"></i>
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="用户名：" prop="name">
          <el-input type="text" v-model="ruleForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系人：" prop="person">
          <el-input type="text" v-model="ruleForm.person" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号：" prop="phone">
          <el-input type="text" v-model="ruleForm.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item style="display:block;">
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button type="primary" @click="dialogVisible = true">修改密码</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 修改密码 -->
    <el-dialog
      title="修改密码"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form :inline="true" :model="formInline" :rules="rulesline" class="demo-form-inline">
        <el-form-item label="密码"  prop="pass">
          <el-input v-model="formInline.pass" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkpass">
          <el-input v-model="formInline.checkpass" placeholder="确认密码"></el-input>
        </el-form-item>
        <el-form-item class="btnpass">
          <el-button type="primary" @click="onSubmit">修改</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import elTitle from '@/components/title.vue'
import {editUserinfo,editpass,userInfo} from '@/utils/index.js'
export default {
  data() {
    var name = (rule, value, callback) => {
      if (value === '') {
        callback(new Error("用户名不能为空"));
      } else {
        callback();
      }
    };
    var phone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error("手机号不能为空"));
      } else {
        callback();
      }
    };
    var pass = (rule, value, callback) => {
      if (!/^(\w){6,20}$/.test(value)) {
        callback(new Error("密码由6-20位字母、数字、下划线"));
      } else {
        callback();
      }
    };
    var checkPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.formInline.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      title:"个人信息",
      dialogVisible:false,
      // activeName: 'first'
      ruleForm: {
        name: "",
        phone:'',
        person:''
      },
      rules: {
        name: [{ validator: name, trigger: "blur" }],
        phone: [{ validator: phone, trigger: "blur" }],
      },
      formInline: {
        pass: '',
        checkpass: ''
      },
      rulesline:{
        pass: [{ validator: pass, trigger: "blur" }],
        checkpass: [{ validator: checkPass, trigger: "blur" }],
      },
      imageUrl: '',
      fileList:[],
      picDis:false
    };
  },
  components:{
    elTitle,
  },
  created(){
    userInfo().then((res)=>{
      this.ruleForm.name = res.data.username
      this.ruleForm.phone = res.data.m_phone
      this.ruleForm.person = res.data.contact
      this.imageUrl = res.data.icon
    })
  },
  methods: {
    // 上传视频
    handleAvatarSuccess(file) {
      console.log(file)
      this.fileList = file.data
      this.imageUrl = file.data.src
      this.picDis = true
    },
    deteled(){
      this.fileList = []
      this.imageUrl = ''
      setTimeout(()=>{
        this.picDis = false
      },500)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          editUserinfo({
            username:this.ruleForm.name,
            m_phone:this.ruleForm.phone,
            contact:this.ruleForm.person,
            icon:this.fileList.src
          }).then((res)=>{
            if(res.code == '0'){
              this.$message.closeAll()
              this.$message.success('修改成功')
            }else{
              this.$message.closeAll()
              this.$message.warning(res.msg)
            }
          })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 修改密码
    handleClose(){
      this.dialogVisible = false
    },
    onSubmit() {
      if(this.formInline.pass != this.formInline.checkpass){
        this.$message.closeAll()
        this.$message.warning('两次密码输入不正确')
      }else{
        editpass({
          newpass:this.formInline.pass,
          cfmpass:this.formInline.checkpass,
        }).then((res)=>{
          if(res.code == '0'){
            this.$message.closeAll()
            this.$message.success('修改成功')
            setTimeout(()=>{
              this.dialogVisible = false
            },800)
          }else{
            this.$message.closeAll()
            this.$message.warning(res.msg)
          }
        })
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.infor{
  background: white;
  margin-top: 15px;
}
.demo-ruleForm::v-deep{
  padding: 40px 100px 40px 40px;
  .el-form-item:nth-child(1){
    display: block;
  }
  .el-form-item{
    display: inline-block;
    width: 40%;
    margin-bottom: 30px;
    min-width: 500px;
  }
  .el-form-item__content{
    // width: 400px;
  }
}
.demo-form-inline::after{
  content: "";
  display: block;
  clear: both;
}
.demo-form-inline::v-deep{
  margin-left: 40px;
  .el-form-item{
    display: block;
    
  }
  .el-form-item__label{
    width: 70px;
  }
  .el-form-item__content{
    width: 70%;
  }
  .btnpass{
    float: right;
    margin: 0;
    margin-right: 86px;
  }
}

.avatar-uploader::v-deep  {
  .el-upload{
    border: 1px dashed #d9d9d9 !important;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.deteled{
  font-size: 20px;
  position: absolute;
  top: 5px;
  right: 5px;
}
.deteled:hover{
  color: red;
}
</style>